<html>
    <head>
        <title>需量分析</title>
        <link rel="stylesheet" href="../../../assets/bundle.element.css">
        <link rel="stylesheet" href="../../../style.css">


        <style>


        </style>

    </head>
    <body>
        <div class="page" id="page-vue">

            <div class="page-title">需量分析</div>
            <div class="page-main">
                <el-row>
                    <el-col :span="4">
                        <dev-tree v-on:click-node="onClickNode"   :tabsign="'z'"  :energy="energyType"></dev-tree>
                    </el-col>
                    <el-col :span="20">
                        <div class="page-head">
                                <el-form :inline="true" size="small">


                                        <el-form-item label="" >
                                                <el-date-picker
                                                v-model="beginTime"
                                                :type="dateType"
                                                placeholder="起始"
                                                value-format="yyyy-MM-dd"
                                                style="width: 150px;"
                                                >
                                              </el-date-picker>

                                        </el-form-item>

                                        <!--
                                        <el-form-item label="周期">
                                                <el-radio-group v-model="cycle" @change="onChangeCycle">
                                                        <el-radio-button label="日"></el-radio-button>
                                                        <el-radio-button label="月"></el-radio-button>
                                                        <el-radio-button label="年"></el-radio-button>
                                                      </el-radio-group>
                                              </el-date-picker>
                                        </el-form-item>
                                        -->
                                    <el-tooltip effect="dark" content="请点击左边树中区域" v-model="tooltip" placement="right">
                                        <el-form-item>
                                                <el-button type="primary" @click="onSearch">查询</el-button>
                                        </el-form-item>
                                    </el-tooltip>
                                    </el-form>
                        </div>
                            <el-tabs class="el-tabs_line" v-model="tabName" @tab-click="onTabClick">
                                    <el-tab-pane label="日最大需量分析" name="tabDay">
                                    </el-tab-pane>
                                    <el-tab-pane label="月最大需量分析" name="tabMonth">
                                    </el-tab-pane>

                                </el-tabs>

                                <el-row>
                                        <el-col :span="24">
                                            <div class="chart-title">最大需量 </div>
                                            <div class="chart-outer">
                                                <chart-elex v-bind:option="chartData"></chart-elex>
                                            </div>

                                            <!--
                                            <div class="chart-title">最大需量发生时间分布</div>
                                            <div class="chart-outer">

                                            </div>
                                            -->

                                                <el-table
                                                    :data="pvDatas"
                                                    border
                                                    stripe
                                                    size="mini"
                                                    height="300"
                                                    style="width: 100%;">
                                                    <el-table-column
                                                        prop="groupName"
                                                        label="监测点">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="groupId"
                                                        label="日期">
                                                        <template slot-scope="scope">
                                                            <span>{{scope.row.groupId.substr(0,8)}}</span>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                        v-if="dateType=='date'"
                                                        prop="field40"
                                                        label="最大需量 ">
                                                    </el-table-column>

                                                    <el-table-column
                                                        v-if="dateType=='month'"
                                                        prop="field40"
                                                        label="最大需量 ">
                                                    </el-table-column>

                                                    <el-table-column
                                                        prop="groupId"
                                                        label="发生时间">
                                                        <template slot-scope="scope">
                                                                <span v-if="dateType=='date'">{{scope.row.groupId.substr(8,2)}}</span>
                                                                <span v-if="dateType=='month'">{{scope.row.attributes.T29_2.substr(12)}}</span>
                                                            </template>
                                                    </el-table-column>
                                                </el-table>
                                        </el-col>
                                    </el-row>

                    </el-col>
                </el-row>

            </div>


        </div>

        <script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
        <script>

                var vuePage=new Vue({
                    el:'#page-vue',
                    data:{
                        cycle:'日',
                        tabName:'tabDay',
                        dateType:'date',
                        beginTime:'',
                        endTime:'',
                        currNodedata:null,
                        pvDatas:[],
                        chartData:{},
                        energyType:'',
                        tooltip:false,
                    },
                    methods:{
                        onSearch:function(){
                            this.loadPvDatas();
                        },

                        onClickNode(node){
                            if(node.id.substr(0,1)!="Z"){ //必须点击区域
                                return;
                            }
                            this.currNodedata = node;
                            this.loadPvDatas();
                        },



                        onTabClick(tab,event){
                            if(tab.name=='tabDay'){
                                this.dateType='date';
                            }else{
                                this.dateType='month';
                            }
                            this.loadPvDatas();
                        },
                        onChangeCycle(){},
                        loadPvDatas(){
                            if(!this.currNodedata){
                                this.$message({
                                    message: '请点击设备！',
                                    type: 'warning'
                                });
                                return;
                            }

                            let _self = this;
                            let dateTime;
                            if(this.dateType=='date'){
                                dateTime = this.beginTime;
                            }else{
                                dateTime = this.beginTime.substr(0,7);
                            }


                            const loading = this.$loading({
                                lock: true,
                                text: 'Loading',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.3)'
                            });

                            setTimeout(() => {
                                loading.close();
                            }, 1000);

                            var dArr = dateTime.split('-');
                            var param={
                                zoneIds:[this.currNodedata.dataId].join(','),
                                zoneType:0,
                                energyType:this.energyType,
                                year:dArr[0]||0,
                                month:dArr[1]||0,
                                day:dArr[2]||0,
                                sumType:0,
                            };
                            HttpUtil.get('Analysis/getEnergyParam', param)
                            .success(function(data){
                                console.log('getEnergyParam',data);
                                _self.pvDatas = data.data;
                                _self.refreshChart();

                            });
                        },
                        refreshChart(){
                            if(this.pvDatas.length==0) return;

                            let xlabels=[], //监测时间点
                                xlabels2=[],
                                yvalues=[]; //最大需量值


                            //1.找出监测时间点
                            if(this.dateType=='date'){
                                let time = this.beginTime;
                                for(let i=0;i<24;i++){
                                    let h=i<10?'0'+i:i;
                                    xlabels.push(h);
                                }

                                xlabels.forEach(item=>{
                                    let max=0,name='';
                                    this.pvDatas.forEach(pv=>{
                                        if( (pv.groupId==time+item)&&item.field40>max ){
                                            max = item.field40;
                                            name = pv.groupName;
                                        }
                                    });

                                    yvalues.push(max);
                                    xlabels2.push(name);
                                });

                            }else{
                                let time = this.beginTime.substr(0,7).replace(/-/g,'');
                                for(let i=0;i<31;i++){
                                    let d=i+1;
                                    if(d<10) d='0'+d;
                                    xlabels.push(d);
                                }

                                xlabels.forEach(item=>{
                                    let max=0,name='';
                                    this.pvDatas.forEach(pv=>{
                                        if( (pv.groupId==time+item)&&item.field70>max ){
                                            max = item.field70;
                                            name = pv.groupName;
                                        }
                                    });

                                    yvalues.push(max);
                                    xlabels2.push(name);
                                });



                            }



                            this.chartData={
                                xAxis: [
                                    {
                                        type: 'category',
                                        data: xlabels
                                    },
                                    {
                                        type: 'category',
                                        data: xlabels2,
                                        axisLabel:{
                                            rotate:90
                                        }

                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        type:'line',
                                        smooth: true,
                                        data: yvalues
                                    }
                                ]
                            };




                        }
                    },
                    created:function(){

                        this.beginTime = TimeUtil.convertToString(new Date()).substr(0,10);
                        this.endTime = this.beginTime;
                        this.energyType =HttpUtil.getQueryString('energyType');
                    },
                    mounted:function(){
                        this.tooltip = true;
                    }
                });


            </script>
    </body>
</html>
